<template>
	<div class="zhuce">
		 <mt-header title="注册" :fixed="isFixed">
        <router-link to="/" slot="left">
          <div class="iconfont">&#xe603;</div>
        </router-link>
      </mt-header>
       <div class="kong"></div>
       <div class="logo"></div>
       <div class="box">
       	<input class="ID" type="text" placeholder="请输入您的手机号">
       	<input class="cade" type="text" placeholder="请输入验证码">
       	<a class="send" href="#">发送验证码</a>
       	<a class="button" href="#">注册</a>
        <router-link to="DengLu" slot="left">
       	<a class="yy">已有账户，点击登录</a>
        </router-link>
       </div>
	</div>
</template>


<script type="text/javascript">
	export default {
         data(){
          return{
            isFixed:true,
          }
        }
       }
</script>

<style scoped>
	header{
    	border-color: #111;
    	background-color: #581513;
    	color: #fff;
  	}
  	.zhuce{
  		position: absolute;
  		top:0;
  		left:0;
  		bottom:0;
  		right:0;
  		background-color:pink;
  	}
  	 .kong{
    	height:40px;
    	position: relative;
  	}
  	.logo{
  		display: block;
    	width: 157px;
    	height: 43px;
    	background: url(../../assets/img/images/logoLogin.png) no-repeat 0 0;
    	-webkit-background-size: 157px 43px;
    	background-size: 157px 43px;
    	position: absolute;
    	top: 103px;
    	left: 50%;
    	transform: translate(-79px,0px);
  	}
  	.box{
  		display: block;
    	width: 300px;
    	height: 190px;
    	position: absolute;
    	top: 200px;
    	left: 50%;
    	transform: translate(-150px,0px);
    	letter-spacing: 0px;
    	font-size: 0px;
  	}
  	.ID{
  		display: inline-block;
    	vertical-align: top;
    	padding-left: 40px;
    	width: 300px;
    	height: 40px;
    	border-radius: 4px;
    	border: 1px solid #682a25;
    	box-sizing: border-box;
    	background-color: rgba(255,255,255,0);
    	background: url(../../assets/img/images/ID.png) no-repeat 0 0;
    	-webkit-background-size: 40px 40px;
    	background-size: 40px 40px;	
  	}
  	.cade{
  		display: inline-block;
    	vertical-align: top;
    	padding-left: 40px;
    	width: 180px;
    	height: 40px;
    	border-radius: 4px;
    	border: 1px solid #682a25;
    	box-sizing: border-box;
    	background-color: rgba(255,255,255,0);
    	background: url(../../assets/img/images/cade.png) no-repeat 0 0;
    	-webkit-background-size: 40px 40px;
    	background-size: 40px 40px;	
    	margin-top:20px;
  	}
  	.send{
	  	display: inline-block;
	    vertical-align: top;
	    margin-left: 15px;
	    height: 40px;
	    width: 105px;
	    border-radius: 4px;
	    background-color: #f9ac7d;
	    font-size: 16px;
	    color: #fff;
	    line-height: 38px;
	    text-align: center;
	    margin-top:20px;
  	}
  	.button{
	  	display: inline-block;
	    vertical-align: top;
	    height: 40px;
	    width: 300px;
	    border-radius: 4px;
	    background-color: #682a25;
	    font-size: 16px;
	    color: #f9ac7d;
	    line-height: 38px;
	    text-align: center;
	    margin-top:20px;
  	}
  	.yy{
	  	display: inline-block;
	    font-size: 15px;
	    color: #682a25;
	    line-height: 15px;
	    height: 15px;
	    width: 300px;
	    text-align: center;
	    margin-top:15px;
  	}
</style>